<template>
    <div v-if="(scrollHeight<=130)" style="background-color:rgb(53,104,82);height:100px">
        <img src="../../assets/pic/logo.png" alt="logo" width="100px" height="90px" style="margin: 5px 0 0 175px">
        <img src="../../assets/pic/text_logo.png" alt="logo" width="110px" height="60px" style="margin: 10px 0 0 10px;position: absolute;">
        <div  style="margin: -28px 0 0 292px;position: absolute;color: rgb(236,219,186);font-weight: 600;font-size: 10px;">
          闲置物品交换平台</div>
        <div id="input">
          <el-input placeholder="请输入内容" v-model="inputText" class="input-with-select" style="width:600px">
            <el-select v-model="select" slot="prepend" placeholder="请选择">
              <el-option label="逸物" value="1"></el-option>
              <el-option label="精选" value="2"></el-option>
              <el-option label="同城" value="3"></el-option>
            </el-select>
            <el-button slot="append" icon="el-icon-search" style="position:absolute;margin-top: -20px;height: 40px;"></el-button>
          </el-input>
        </div>      
        <div id="text_bar">
          <div class="bardiv">热搜 &emsp;&emsp;逸物精选&emsp;&emsp; 同城优选 &emsp;&emsp; 进口好物 &emsp;&emsp; 换物季 &emsp;&emsp; 会员限购 &emsp;&emsp; 热换商品 &emsp;&emsp; 双<span style="color:rgb(236,219,186);font-weight:600">12</span>专场 
          </div>
        </div>
        <div style="position:absolute;color: rgb(255,255,255);margin: -60px 0 0 1070px;">
          <div><span><i class="el-icon-location-information"></i>&nbsp;绵阳</span><span>&emsp;</span>
            <i v-if="wea_img=='yin'" class="el-icon-cloudy-and-sunny"></i>
            <i v-else-if="wea_img=='qing'" class="el-icon-sunny"></i>
            <i v-else-if="wea_img=='yu'" class="el-icon-light-rain"></i>
            <i v-else-if="wea_img=='yun'" class="el-icon-cloudy"></i>&nbsp;{{tem}}°C</div>
          <div style="float:right;margin: 20px 0 0 0;position: absolute;color: rgb(236,219,186);">
            <div v-if="(isLogin==false)" class="bardiv" @click="navgateTo()">登录系统</div>
            <div v-if="(isLogin==true)" class="bardiv">欢迎
              <el-dropdown>
                <span class="el-dropdown-link" style="color: rgb(236,219,186);">
                  &nbsp;{{userName}}
                  <!-- <i class="el-icon-arrow-down el-icon--right"></i> -->
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item ><span @click="outLogin()">退出系统</span></el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
          </div>
        </div>
    </div>
    <div id="bar" v-else>
        <img src="../../assets/pic/text_logo_no_background.png" alt="logo" width="100px" height="50px" style="margin-left:200px">
        <!-- <div id="text_bar_1">
          <el-row :gutter="20">
            <el-col :span="6"><div class="bardiv">首页</div></el-col>
            <el-col :span="6"><div class="bardiv">精选</div></el-col>
            <el-col :span="6"><div class="bardiv">同城</div></el-col>   
            <el-col :span="6">
              <div v-if="(isLogin==false)" class="bardiv">登录</div>
              <div v-if="(isLogin==true)" class="bardiv">用户中心</div>
            </el-col>
          </el-row>
        </div> -->
        <div id="input_1">
          <el-input placeholder="请输入内容" v-model="inputText" class="input-with-select">
            <el-select v-model="select" slot="prepend" placeholder="请选择">
              <el-option label="逸物" value="1"></el-option>
              <el-option label="精选" value="2"></el-option>
              <el-option label="同城" value="3"></el-option>
            </el-select>
            <el-button slot="append" icon="el-icon-search" style="position:absolute;margin-top: -20px;height: 40px;"></el-button>
          </el-input>
        </div>   
    </div>
</template>
<script>
import { getWether } from "../../api/wether/wether";
export default {
  name: 'navigateBar',
  data(){
    return{
      isLogin:false,
      userName:'',
      select: '',
      inputText:'',
      scrollHeight:0,
      dialogVisible: false,
      wea:'',
      tem:'',
      wea_img:'',
    }
  },
  mounted () {
      window.addEventListener('scroll', this.handleScroll),
      this.getLoginState()
  },
  created() {
    this.getWeaAndTem();
  },
 methods:{
    getLoginState(){
      let user = localStorage.getItem("user");
      console.log('user',user)
      if(user !== null){
        this.isLogin = true
        this.userName = user
      }
    },
    outLogin(){
      console.log('退出系统');
      localStorage.clear();
      location.reload()
    },
    handleScroll () {
      // var sortMenu = document.body.scrollTop;
      var scrollTop = document.documentElement.scrollTop;
      this.scrollHeight = scrollTop;
      // console.log('滚动条高度',this.scrollHeight);
    },
    getWeaAndTem() {
      const dataList = {
      appid: "55297681", // 账号ID
      appsecret: "PZcXgN1m", // 账号密钥
      city: "绵阳", // 城市名称,不要带市和区
      version: "v61",
      };
      getWether(dataList).then((res) => {
          this.wea = res.data.wea;
          this.tem = res.data.tem;
          this.wea_img = res.data.wea_img;
      });
    },
    navgateTo(){
      this.$router.push("/login")
      document.title = '欢迎登录'
    }
 },
}
</script>
<style>
#bar{
  position: sticky;
  top: 0px;
  background-color: rgb(93,134,117);
  height: 55px;
  z-index: 999;
  border-bottom: 2px rgb(236,219,186) solid;
  animation: showbar .7s;
}
#text_bar{
  margin: -30px 0 0 432px;
  width:700px;
  /* color: rgb(236,219,186); */
  color: rgb(255,255,255);
  font-size: 13px;
  font-weight: 500;
}
#text_bar_1{
  margin: -40px 0 0 140px;
  width:500px;
  color: rgb(236,219,186);
  font-size: 17px;
  font-weight: 500;
}
#input{
  width: 660px;
  position: absolute;
  margin: -82px 0 0 430px;
}
#input_1{
  width: 700px;
  position: absolute;
  margin: -48px 0 0 435px;
}
.el-button{
  background-color: rgb(236,219,186) !important;
}
.el-button--default{
  background-color: rgb(236,219,186) !important;
}
.el-select{
  width: 100px;
}
.el-input__inner :focus {
  border-color: rgb(236,219,186) !important;
}
.bardiv{
  cursor: pointer;
}
@keyframes showbar {
  from{
    opacity: 0
  }
  to{
    opacity: 1
  }
}
</style>